<template>
  <div>
    <a-alert style="text-align: center;margin-bottom: 10px" message="所有文件只保留5分钟，5分钟后将自动删除！" type="info"/>

    <a-form>
      <a-row>
        <a-col :span="24">
          <a-form-item label="压缩等级" :label-col="{span: 2}" :wrapper-col="{span: 22}">
            <a-radio-group v-model="radioValue" @change="onChange">
              <a-radio-button v-for="item in radioList" :value="item.value" :key="item.value">
                {{ item.title }}
              </a-radio-button>
            </a-radio-group>
            <br>
            <a-alert message="压缩等级越小压缩完文件越小" type="info" show-icon/>

          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-upload-dragger
      class="avatar-uploader"
      name="file"
      list-type="picture-card"
      :multiple="isMultiple"
      :customRequest="customRequest"
      :data="{biz:bizPath,radioValue:radioValue}"
      :show-upload-list="false"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="cloud-upload"/>
      </p>
      <p class="ant-upload-text">
        单击或拖动文件到此区域进行上传
      </p>
      <p class="ant-upload-hint">
        只支持单次上传
      </p>
    </a-upload-dragger>
    <img width="100%" height="100%"
         style="margin-top: 20px"
         :src="getImgView(imgUrl)"
         :data-src="getImgView(imgUrl)"
    >
    <div v-if="imgUrl != ''" style="margin-top: 20px;text-align: center">
      压缩后大小：{{ fileSize }}
      <a-button style="margin-left: 20px">
        <a :href="this.url.downloadImg + imgUrl">
          下载
        </a>
      </a-button>
    </div>

  </div>
</template>


<script>
import {getAction, getFileAccessHttpUrl, postAction} from '@/api/manage'
import AntsImageUpload from '@/components/ants/AntsImageUpload'

export default {
  name: 'compress',
  components: {
    AntsImageUpload
  },
  data() {
    return {
      form: this.$form.createForm(this),
      url: {
        compressUpload: '/articleView/compressUpload',
        downloadImg: process.env.VUE_APP_BASE_API + 'sys/common/static/'
      },
      isMultiple: false,
      bizPath: 'imgCompress',
      uploadAction: process.env.VUE_APP_BASE_API + 'articleView/compressUpload',
      picUrl: false,
      radioList: [
        {title: '0级', value: 0},
        {title: '1级', value: 0.1},
        {title: '2级', value: 0.2},
        {title: '3级', value: 0.3},
        {title: '4级', value: 0.4},
        {title: '5级', value: 0.5},
        {title: '6级', value: 0.6},
        {title: '7级', value: 0.7},
        {title: '8级', value: 0.8},
        {title: '9级', value: 0.9}
      ],
      radioValue: 0.5,
      imgUrl: '',
      fileSize: '',
    }
  },
  created() {
  },
  methods: {
    key() {
      return this.$route.path
    },
    //重写上传方法
    customRequest(data) {
      const formData = new FormData();
      formData.append("file", data.file);
      formData.append("biz", this.bizPath);
      formData.append("radioValue", this.radioValue);
      postAction(this.url.compressUpload, formData).then(res => {
        if (res.success) {
          this.imgUrl = res.result.filePath
          this.fileSize = res.result.size
        }
      });
    },
    onChange(e) {
      // console.log(`checked = ${e.target.value}`);
    },
    /* 图片预览 */
    getImgView(text) {
      if (text && text.indexOf(',') > 0) {
        text = text.substring(0, text.indexOf(','))
      }
      return getFileAccessHttpUrl(text)
    },
    downloadImg() {
      getAction(this.url.downloadImg + this.imgUrl).then(res => {

      })
    }
  }

}
</script>

<style>
.commentReview {
  color: #999;
  display: inline;
  font-weight: 400 !important;
}

</style>

